<script setup>
import {computed, reactive} from 'vue'
const author = reactive({
  name:'jjbo',
  books:[
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})

</script>
<!-- 在 <script>中是引入其他文本-->
<!-- 在<tempalte>中主要是写页面代码展示样式 -->



<template>


<p>已出版书籍</p>
<span>{{publishedBooksMessage}}</span>
 </template>
<!-- 在 <style>中主要是写页面结构的格式，加上scoped时只能影响当前文本的样式-->
<style scoped>

</style>
